<!--基础外边框-->
<template>
  <div>
    <div v-if="!noBorder" class="ae-main-border">
      <image class="t_b border" :src="require('@/assets/images/assist/t_b.png')" />
      <image class="l_b border" :src="require('@/assets/images/assist/l_b.png')" />
      <image class="b_b border" :src="require('@/assets/images/assist/b_b.png')" />
      <image class="r_b border" :src="require('@/assets/images/assist/r_b.png')" />
      <image class="t_r_b corner" :src="require('@/assets/images/assist/t_r_b.png')" />
      <image class="t_l_b corner" :src="require('@/assets/images/assist/t_l_b.png')" />
      <image class="r_d_b corner" :src="require('@/assets/images/assist/r_d_b.png')" />
      <image class="l_d_b corner" :src="require('@/assets/images/assist/l_d_b.png')" />
    </div>
    <div :style="{ padding: padding }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    noBorder: {
      type: Boolean,
      default: false,
    },
    padding: {
      type: String,
      // #ifdef H5
      default: "15px",
      // #endif
      // #ifndef H5
      default: "8px",
      // #endif
    },
  },
};
</script>

<style lang="scss" scope>
.ae-main-border {
  .corner {
    z-index: 999;
    width: 16px;
    height: 16px;
  }

  .border {
    z-index: 998;
  }

  .t_b,
  .b_b {
    height: 5px;
    position: absolute;
    left: 0px;
    width: 100%;
  }

  .t_b {
    top: 0px;
  }

  .b_b {
    bottom: 0px;
  }

  .r_b,
  .l_b {
    width: 5px;
    position: absolute;
    top: 0px;
    height: 100%;
  }

  .l_b {
    left: 0px;
  }

  .r_b {
    right: 0px;
  }

  .t_l_b,
  .t_r_b,
  .l_d_b,
  .r_d_b {
    position: absolute;
  }

  .t_l_b {
    top: 0px;
    left: 0px;
  }

  .t_r_b {
    top: 0px;
    right: 0px;
  }

  .r_d_b {
    bottom: 0px;
    right: 0px;
  }

  .l_d_b {
    bottom: 0px;
    left: 0px;
  }
}

.ae-border-content {
  padding: 24px;
}
</style>
